<template>
  <div>
    <div class="container" v-if="!showcheckreport">
      <div class="stat-box">
        <div class="stat">
          <div class="stat-left">
            <div class="stat-left-box">
              <div class="stat-left-number">{{ lookInfo.headcount || 0 }}</div>
              <div class="stat-left-label">总人数（人）</div>
              <div class="stat-left-pic"></div>
            </div>
          </div>
          <div class="stat-right">
            <div class="stat-right-box">
              <div class="stat-right-pic"></div>
              <div class="stat-right-content">
                <div class="stat-right-number">{{ lookInfo.resident || 0}}</div>
                <div class="stat-right-label">外来人员（人）</div>
              </div>
            </div>
            <div class="stat-right-box">
              <div class="stat-right-pic pic2"></div>
              <div class="stat-right-content">
                <div class="stat-right-number">{{ lookInfo.headHold|| 0 }}</div>
                <div class="stat-right-label">持有无人机（台）</div>
              </div>
            </div>
            <div class="stat-right-box">
              <div class="stat-right-pic pic3"></div>
              <div class="stat-right-content">
                <div class="stat-right-number">
                  {{ lookInfo.censusRegisterPeo|| 0 }}
                </div>
                <div class="stat-right-label">户籍人员（人）</div>
              </div>
            </div>
            <div class="stat-right-box">
              <div class="stat-right-pic pic4"></div>
              <div class="stat-right-content">
                <div class="stat-right-number">
                  {{ lookInfo.headAverageHold || 0}}
                </div>
                <div class="stat-right-label">人均持有（台）</div>
              </div>
            </div>
          </div>
        </div>
        <div class="stat">
          <div class="stat-left">
            <div class="stat-left-box">
              <div class="stat-left-number">{{ lookInfo.keyPersonnel || 0}}</div>
              <div class="stat-left-label">重点人员（人）</div>
              <div class="stat-left-pic pic1"></div>
            </div>
          </div>
          <div class="stat-right">
            <div class="stat-right-box">
              <div class="stat-right-pic pic5"></div>
              <div class="stat-right-content">
                <div class="stat-right-number">{{ lookInfo.controlled|| 0 }}</div>
                <div class="stat-right-label">已管控（人）</div>
              </div>
            </div>
            <div class="stat-right-box">
              <div class="stat-right-pic pic2"></div>
              <div class="stat-right-content">
                <div class="stat-right-number">{{ lookInfo.keyHold|| 0 }}</div>
                <div class="stat-right-label">持有无人机（台）</div>
              </div>
            </div>
            <div class="stat-right-box">
              <div class="stat-right-pic pic6"></div>
              <div class="stat-right-content">
                <div class="stat-right-number">{{ lookInfo.goldieLock|| 0 }}</div>
                <div class="stat-right-label">待管控（人）</div>
              </div>
            </div>
            <div class="stat-right-box">
              <div class="stat-right-pic pic4"></div>
              <div class="stat-right-content">
                <div class="stat-right-number">
                  {{ lookInfo.keyAverageHold|| 0 }}
                </div>
                <div class="stat-right-label">人均持有（台）</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container-table">
        <div class="card-title">
          <img src="@/assets/images/title-card.png" alt="" />
          <div class="text">人员明细</div>
        </div>
        <div class="container-search">
          <!-- <div class="container-search-top"></div> -->
          <div class="container-search-bottom">
            <!-- 筛选条件 -->
            <div class="search">
              <div class="search-item">
                <el-tree-select
                    style="width: 100%" clearable
                    v-model="params.policeId"
                    :data="policeList"
                    :props="{
                      value: 'deptId',
                      label: 'deptName',
                      children: 'children',
                    }"
                    value-key="deptId"
                    placeholder="请选择常住地派出所"
                    check-strictly
                  />
              </div>
              <div class="search-item">
                <el-tree-select
                    style="width: 100%" clearable
                    v-model="params.localPoliceStationId"
                    :data="policeList"
                    @change="localPoliceHandle"
                    :props="{
                      value: 'deptId',
                      label: 'deptName',
                      children: 'children',
                    }"
                    value-key="deptId"
                    placeholder="请选择户籍地派出所"
                    check-strictly
                  />
              </div>
              <div class="search-item">
                <el-select
                  v-model="params.personnelType"
                  placeholder="请选择人员类型"
                  clearable
                  class="search-input"
                >
                  <!-- @change="peopleTypeChange" -->
                  <el-option
                    v-for="dict in unittypeList"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </div>
              <div class="search-item" v-if="params.personnelType == 1">
                <el-select
                  v-model="params.controlType"
                  placeholder="请选择管控类型"
                  clearable
                  class="search-input"
                >
                  <!-- @change="peopleTypeChange" -->
                  <el-option
                    v-for="dict in unittypeList2"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </div>
              <div class="search-item">
                <el-input
                  style="width: 300px"
                  v-model="params.projectNameOrCode"
                  placeholder="请输入姓名/身份证/联系电话检索"
                  clearable
                  maxlength="25"
                  class="search-input"
                />
              </div>
              <div class="search-item">
                <el-button type="primary" @click="getunitList"
                  ><img src="@/assets/images/search.png" alt="" />
                  搜索</el-button
                >
                <el-button color="#eff3ff" :dark="true" @click="reset"
                  ><img src="@/assets/images/reset.png" alt="" />
                  <span style="color: #6d98fd">重置 </span>
                </el-button>
              </div>
            </div>
          </div>
        </div>
        <!-- 表格筛选 -->
        <!-- <div class="sort">
          <div class="sort-title">排序类型：</div>
          <el-select
            v-model="params.sortField"
            placeholder="按时间排序"
            clearable
            class="search-input"
            @change="handlersort"
          >
            <el-option
              v-for="dict in sortList"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </div> -->
        <!-- 表格数据 -->
        <el-table
          v-loading="loading"
          :data="unitList"
          border
          height="34.2vh"
          :header-cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column
            label="姓名"
            prop="screeningPersonnelName"
            :show-overflow-tooltip="true"
            width="120"
          >
          </el-table-column>
          <el-table-column
            label="身份证号码"
            prop="identityCard"
            width="220"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="联系电话"
            prop="phone"
            width="180"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="持有无人机"
            prop="uavCount"
            :show-overflow-tooltip="true"
            width="100"
          >
            <template #default="{ row }">
              {{ row.uavCount || "0" }} 架
            </template>
          </el-table-column>
          <el-table-column
            label="工作单位"
            prop="workUnit"
            :show-overflow-tooltip="true"
            width="180"
          >
          </el-table-column>
          <el-table-column
            label="职业"
            prop="jobOccupation"
            :show-overflow-tooltip="true"
            width="180"
          >
          </el-table-column>
          <el-table-column
            label="现居住地"
            prop="currentResidentialAddress"
            :show-overflow-tooltip="true"
            width="180"
          >
          </el-table-column>
         
          <el-table-column
            label="常住地派出所"
            prop="policeName"
            :show-overflow-tooltip="true"
            width="180"
          >
            <template #default="{ row }">
              {{ row.policeName || "--" }}
            </template>
          </el-table-column>
          <el-table-column
            label="户籍地派出所"
            prop="localPoliceStationName"
            :show-overflow-tooltip="true"
            width="180"
          >
            <template #default="{ row }">
              {{ row.localPoliceStationName || "--" }}
            </template>
          </el-table-column>
          <el-table-column
            label="人员类型"
            prop="personnelTypeName"
            :show-overflow-tooltip="true"
            width="180"
          >
          <template #default="{ row }">
              {{ row.personnelTypeName  }}
              <el-tag
                  v-if="row.personnelTypeName == '重点人员' && row.controlTypeeName !== null" :type="row.controlTypeeName == '待管控' ?'primary':'success'"
                  style="margin-left:10px;"
              >{{ row.controlTypeeName }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="更新时间"
            prop="updateTime"
            :show-overflow-tooltip="true"
            width="180"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            :show-overflow-tooltip="true"
            width="180"
            :resizable="false"
            fixed="right"
          >
            <template #default="{ row }">
              <div class="table-operate">
                <span class="detail" @click="handleOperate('detail', row)"
                  >查看</span
                >
                <span v-if="row.personnelTypeName == '重点人员'" class="check" @click="handleOperate('check', row)"
                  >管控</span
                >
                <span class="edit" @click="handleOperate('edit', row)"
                  >编辑</span
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination
          class="pagination"
          :total="total"
          v-model:page="params.pageNum"
          v-model:limit="params.pageSize"
          @pagination="getunitList"
        />
      </div>
    </div>
    <!-- 添加 -->
    <el-dialog
      v-model="showUnitadd"
      width="1400px"
      append-to-body
      class="dialogBox"
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <img src="@/assets/images/title-card.png" alt="" />
          <div class="header-title">人员编辑</div>
        </div>
      </template>
      <Unitadd
        v-if="showUnitadd"
        v-model:showUnitadd="showUnitadd"
        :unitlevelList="unitlevelList"
        :supervisorList="supervisorList"
        :unittypeList="unittypeList"
        @refreshList="reset"
        ref="Unitaddref"
      ></Unitadd>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="peopleCancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 管控 -->
    <el-dialog
      v-model="showControladd"
      width="1000px"
      append-to-body
      class="dialogBox"
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <img src="@/assets/images/title-card.png" alt="" />
          <div class="header-title">重点人员管控</div>
        </div>
      </template>
      <Control
        v-if="showControladd"
        v-model:showControladd="showControladd"
        @refreshList="reset"
        ref="Controlref"
      ></Control>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitControl">确 定</el-button>
          <el-button @click="controlCancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 详情 -->
    <Unitdetail
      v-if="showUnitdetail"
      ref="Unitdetailref"
      v-model:showUnitdetail="showUnitdetail"
    ></Unitdetail>

    <!-- 检查上报 -->
    <!-- <Checkreport
      ref="checkreportref"
      v-if="showcheckreport"
      v-model:showcheckreport="showcheckreport"
      @refreshList="reset"
    ></Checkreport> -->
  </div>
</template>

<script setup>
import Log from "@/views/monitor/job/log.vue";

const { proxy } = getCurrentInstance();
import { ref, onMounted } from "vue";
import Card from "@/components/Card";
import Unitadd from "./add";
import Control from "./control";
import Unitdetail from "./detail";
// import Checkreport from "../../task/checkreport";
import {
  getinstitutionlist,
  delinstitution,
  getPoliceListApi,
  getLookApi,
} from "@/api/erp/unit";
import { getDictsApi, getAreaList,getPepleDictApi } from "@/api/dict";
import { ElMessage, ElMessageBox } from "element-plus";
import useUserStore from "@/store/modules/user";

const userStore = useUserStore();

// 搜索参数
let params = ref({
  pageNum: 1,
  pageSize: 20,
  policeId: null,
  localPoliceStationId: null,
  controlType: null,
  personnelType: null,
  deptId: null,
  projectNameOrCode: "",
});
// 总数
const total = ref(0);

//行政区划数据
let options = ref([]);

// 表格加载效果
const loading = ref(false);

// 项目列表
const unitList = ref([]);
//看板信息
const lookInfo = ref({
  headcount: 0,
  resident: 0,
  censusRegisterPeo: 0,
  headHold: 0,
  headAverageHold: 0,
  keyPersonnel: 0,
  controlled: 0,
  goldieLock: 0,
  keyHold: 0,
  keyAverageHold: 0,
});

// 单位类型下拉
const unittypeList = ref([]);
const unittypeList2 = ref([]);
// 派出所列表
const policeList = ref([]);
// 单位级别下拉
const unitlevelList = ref([]);
// 行业主管下拉
const supervisorList = ref([]);
// 排序下拉
const sortList = ref([]);

// 管控弹窗的显隐
let showControladd = ref(false);
// 详情弹窗的显隐
let showDetail = ref(false);
// 添加弹窗的显隐
let showUnitadd = ref(false);
// 详情弹窗的显隐
let showUnitdetail = ref(false);
let showcheckreport = ref(false);

//详情组件的引用
const Unitdetailref = ref(null);
//添加编辑的引用
const Unitaddref = ref(null);
//管控的引用
const Controlref = ref(null);
//检查上报的引用
const checkreportref = ref(null);

const areaprops = {
  lazy: true,
  checkStrictly: true,
  lazyLoad(node, resolve) {
    console.log("node", node);
    const { level } = node;
    let datas = [];
    setTimeout(() => {
      let code = 1;
      if (level != 0) {
        code = node.data.value;
      }
      getAreaList({ pid: code }).then((response) => {
        if (response.data && response.data.length) {
          datas = response.data.map((item, i) => ({
            value: item.value,
            label: item.label,
            leaf: level >= 3,
            // disabled: true, // 这里可以设置为 true 来禁用这个选项
          }));
        } else {
          datas = [];
        }
        resolve(datas);
      });
    }, 200);
  },
};

/**
 * @description: 序号
 * @param {Number} index 索引
 */
function indexMethod(index) {
  const currentPage = params.value.pageNum;
  const pageSize = params.value.pageSize;
  const truelndex = (currentPage - 1) * pageSize + index + 1;
  return truelndex;
}
/**
 * @description: 表格数据接口
 */
const getunitList = () => {
  loading.value = true;
  getLook();
  getinstitutionlist(
    { pageNum: params.value.pageNum, pageSize: params.value.pageSize },
      params.value,
  ).then((res) => {
    unitList.value = res.rows;
    total.value = res.total;
    loading.value = false;

  });
};

/**
 * @description: 重置
 */
const reset = () => {
  params.value = {
    pageNum: 1,
    pageSize: 20,
    policeId: null,
  localPoliceStationId: null,
    controlType: null,
    personnelType: null,
    deptId: null,
    projectNameOrCode: "",
  };
  getunitList();
};

/**
 * @description: 联级处理省市区操作
 * @param {String} type 类型
 */
const handlerregion = (value) => {
  if (value) {
    switch (value.length) {
      case 1:
        params.value.provinceId = value[0];
        break;
      case 2:
        params.value.provinceId = value[0];
        params.value.cityId = value[1];
        break;
      case 3:
        params.value.provinceId = value[0];
        params.value.cityId = value[1];
        params.value.zoneId = value[2];
        break;
      case 4:
        params.value.provinceId = value[0];
        params.value.cityId = value[1];
        params.value.zoneId = value[2];
        params.value.streetId = value[3];
        break;

      default:
        break;
    }
  } else {
    params.value.region = [];
    params.value.provinceId = null;
    params.value.cityId = null;
    params.value.zoneId = null;
    params.value.streetId = null;
  }
};
/**
 * @description: 表格数据接口
 */
const addunit = () => {
  showUnitadd.value = true;
};

/**
 * @description: 表格数据接口
 */
const handlersort = (value) => {
  getunitList();
};
/**
 * @description: 表格操作
 * @param {String} type 类型
 * @param {Object} row  当前行数据
 */
const handleOperate = async (type, row) => {
  switch (type) {
    case "detail":
      showUnitdetail.value = true;
      nextTick(() => {
        Unitdetailref.value.handleDetailInfo(row);
      });
      break;
    case "edit":
      showUnitadd.value = true;
      nextTick(() => {
        Unitaddref.value.handleEdit(row);
      });
      break;

    case "check":
      showControladd.value = true;
      window.keyPersonal = {};
      nextTick(() => {
        Controlref.value.handleEdit(row);
      });
      break;

    case "delete":
      ElMessageBox.confirm("此操作将删除该重点单位，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        confirmButtonClass: "confirmBtnClass",
        cancelButtonClass: "cancelBtnClass",
        type: "warning",
      })
        .then(async () => {
          const res = await delinstitution(row.institutionId);
          if (res.code === 200) {
            ElMessage.success(res.msg);
            getunitList();
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch(() => {});
      break;

    default:
      break;
  }
};

// /**
//  * @description: 人员管控选择
//  */
//  async function peopleTypeChange(value) {
//   params.value.personnelType = ''
//   // params.personnelType
//     console.log('人员管控选择')
//     console.log(unittypeList.value)
//     console.log(value)
//     unittypeList.value.forEach(item=> {
//       if(item.value == value) {
//         params.value.personnelType = item.parentValue
//       }
//     })
// }

/**
 * @description: 提交
 */
async function submitForm() {
  nextTick(() => {
    Unitaddref.value.handleSubmit();
  });
}

/**
 * @description: 取消
 */
async function peopleCancel() {
  nextTick(() => {
    showUnitadd.value = false;
  });
}

/**
 * @description: 提交
 */
async function submitControl() {
  nextTick(() => {
    Controlref.value.handleSubmit();
  });
}

/**
 * @description: 取消
 */
async function controlCancel() {
  nextTick(() => {
    showControladd.value = false;
  });
}

/**
 * @description: 获取字典
 */
async function getDicts() {
  await getDictsApi("data_personnel_type").then((res) => {
    console.log("管控类型");
    console.log(res);
    //管控类型
    unittypeList.value = res.data;
  });
  await getPepleDictApi({
    dictType: "data_personnel_type",
    pidCode:2,
  }).then((res) => {
    console.log("管控类型2");
    console.log(res);
    //管控类型
    unittypeList2.value = res.data;
  });
  await getPoliceListApi().then((res) => {
    // console.log("派出所");
    // console.log(res);
    //派出所
    if (res.code === 200) {
      policeList.value = proxy.handleTree(res.data, "deptId");
      policeList.value.push({deptName: '其他',  deptId: 10000})
   console.log('派出所')
   console.log(policeList.value)
    }
  });
}

const localPoliceHandle = () => {

}

/**
 * @description:  获取看板信息
 * @param {Number} id
 */
const getLook = () => {
  getLookApi().then((res) => {
    console.log("获取看板信息");
    console.log(res);
    lookInfo.value = res;
  });
};
const route = useRoute();
let screeningPersonnelRow = ref({});
onMounted(() => {
  getunitList();
  getDicts();
  if (window.keyPersonal && !!window.keyPersonal.screeningPersonnelId) {
    screeningPersonnelRow.value = window.keyPersonal;
    handleOperate('check', screeningPersonnelRow.value)
  }

});
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  position: relative;
  .card-title {
    display: flex;
    align-items: center;
    height: 40px;
    border-bottom: 1px solid #f6f6f6;
    .text {
      margin-left: 10px;
      font-size: 16px;
      color: #000000;
    }
  }
  .stat-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .stat {
    display: flex;
    align-items: center;
    // width: 794px;
    width: 49.5%;
    height: 220px;
    background: url("@/assets/images/stat-bgc.png") no-repeat;
    background-size: 100% 100%;
    margin-bottom: 20px;
    color: #ffffff;

    .stat-left {
      width: 30%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-right: 1px dashed #6cabed;
      height: 80%;

      .stat-left-box {
      }
      .stat-left-number {
        text-align: center;
        font-family: DigifaceWide;
        font-size: 36px;
      }
      .stat-left-label {
        text-align: center;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 24px;
        margin: 10px 0 20px 0;
      }
      .stat-left-pic {
        margin-top: 20px;
        margin: 0 auto;
        width: 80px;
        height: 80px;
        background: url("@/assets/images/stat-icon1.png") no-repeat;
      }
      .pic1 {
        background: url("@/assets/images/stat-icon8.png") no-repeat;
      }
    }
    .stat-right {
      width: 70%;
      display: flex;
      flex-wrap: wrap;
      height: 80%;
      padding-left: 60px;
      padding-top: 10px;

      .stat-right-box {
        display: flex;
        margin-right: 50px;
        margin-bottom: 38px;
      }

      .stat-right-pic {
        width: 60px;
        height: 60px;
        background: url("@/assets/images/stat-icon2.png") no-repeat;
        margin-right: 20px;
      }
      .pic2 {
        background: url("@/assets/images/stat-icon3.png") no-repeat;
      }
      .pic3 {
        background: url("@/assets/images/stat-icon4.png") no-repeat;
      }
      .pic4 {
        background: url("@/assets/images/stat-icon5.png") no-repeat;
      }
      .pic5 {
        background: url("@/assets/images/stat-icon6.png") no-repeat;
      }
      .pic6 {
        background: url("@/assets/images/stat-icon7.png") no-repeat;
      }

      .stat-right-number {
        font-family: DigifaceWide;
        font-size: 24px;
        margin-bottom: 8px;
      }
      .stat-right-label {
        font-family: PingFang SC;
        font-size: 16px;
      }
    }
  }

  .container-search {
    margin-bottom: 0px;
    .container-search-bottom {
      background-color: #ffffff;
      border-radius: 10px;
      padding: 15px 15px 15px 15px;
    }
  }

  .container-button {
    position: absolute;
    top: 15px;
    right: 15px;
    img {
      margin-right: 6px;
      margin-top: 2px;
    }
  }
  .container-table {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 15px 15px 15px 15px;
    .sort {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 15px;
      .sort-title {
        font-size: 14px;
      }
    }
  }
}
</style>
